<template>
	<view class="comp-box">
		<view class="navigator-bar" :style="{'margin-top': safeTop + 'px'}">
			<!-- <view class="bar-item" @click="changType(0)">
				<text :class="index === 0 ? 'text-choose' : 'text-unchoose'">场地</text>
				<view :class="index === 0 ? 'indicator-choose' : 'indicator-unchoose'"></view>
			</view> -->
			<view class="bar-item" @click="changType(1)">
				<text :class="index === 1 ? 'text-choose' : 'text-unchoose'">推荐</text>
				<view :class="index === 1 ? 'indicator-choose' : 'indicator-unchoose'"></view>
			</view>
			<view class="bar-item" @click="changType(2)">
				<text :class="index === 2 ? 'text-choose' : 'text-unchoose'">附近</text>
				<view :class="index === 2 ? 'indicator-choose' : 'indicator-unchoose'"></view>
			</view>
			<view class="location-box">
				<image class="location-img" src="/static/LocationBtn.png"></image>
				<text class="location-text">{{ city }}</text>
			</view>
			<view class="search-box">
				<image class="search-img" src="/static/searchBtn.png" @click="search()"></image>
			</view>
		</view>
		<swiper class="swiper-box" :indicator-dots="false" :current="index" disable-touch="true" :duration="0">
			<swiper-item>
				<shop-list :safeBottom="safeBottom"></shop-list>
			</swiper-item>
			<swiper-item>
				<recommend-list :safeBottom="safeBottom"></recommend-list>
			</swiper-item>
			<swiper-item>
				<nearly-list :safeBottom="safeBottom"></nearly-list>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import shopList from './shopList.vue'
	import recommendList from './recommendList.vue'
	import nearlyList from './nearlyList.vue'
	
	export default {
		name: "home",
		components: {
			shopList,
			recommendList,
			nearlyList
		},
		data() {
			return {
				index: 1,
				safeTop: Number,
				safeBottom: Number,
				city: ''
			};
		},
		mounted() {
			this.safeTop = this.$safeTop;
			this.safeBottom = this.$safeBottom;
			if (this.$myLocation.address.city) {
				this.city = this.$myLocation.address.city;
			}
		},
		methods: {
			changType(type) {
				this.index = type;
			},
			search() {
				uni.navigateTo({
					url: '/pages/searchActivity'
				})
			}
		}
	}
</script>

<style lang="scss">
	.comp-box {
		width: 100vw;
		height: 100%;

		.navigator-bar {
			width: 100%;
			height: 84rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.bar-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 20rpx 0 20rpx;

				.text-choose {
					font-size: 40rpx;
					font-weight: bold;
					color: #222222;
				}

				.text-unchoose {
					font-size: 32rpx;
					font-weight: 400;
					color: #222222;
				}

				.indicator-choose {
					width: 40rpx;
					height: 8rpx;
					background: #FF5E2E;
					border-radius: 4rpx;
				}

				.indicator-unchoose {
					width: 40rpx;
					height: 8rpx;
				}
			}
			
			.location-box {
				height: 84rpx;
				position: absolute;
				display: flex;
				align-items: center;
				top: 0;
				left: 32rpx;
				
				.location-img {
					width: 24rpx;
					height: 30rpx;
				}
				
				.location-text {
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					margin-left: 10rpx;
				}
			}
			
			.search-box {
				height: 84rpx;
				position: absolute;
				display: flex;
				align-items: center;
				top: 0;
				right: 32rpx;
				
				.search-img {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

		.swiper-box {
			width: 100%;
			height: 100%;
		}
	}
</style>
